Avec notre code de projet prêt et en cours d'exécution avec toutes ses dépendances, nous pouvons maintenant passer en revue
cette structure et mieux comprendre le fonctionnement d'une application d'électrons.
Je vais démarrer l'application pour mieux démontrer.
Maintenant, Electron fonctionne essentiellement avec deux types de processus différents, le premier étant le processus d'application
principal.
Il s'agit d'un processus notoire que nous pouvons voir s'exécuter ici dans le terminal et qui n'aura jamais qu'un seul d'entre
eux.
Ce processus principal crée ensuite des instances du navigateur Chrome, où s'exécutera le code
frontal de nos applications, HTML, CSS, etc. Ce processus étant appelé processus de rendu et est ce
que nous voyons ici une instance complète de chrome avec les outils de développement chrome ouverts.
Donc, pas de doges et de rendu de chrome.
Désormais, selon le nombre de fenêtres de votre application, une seule application peut avoir plusieurs
processus de rendu ou fenêtres.
Dans un sens plus traditionnel.
Vous pouvez considérer le processus principal comme étant le côté principal ou côté serveur et le processus de fenêtre
étant le côté frontal ou client.
Ne vous inquiétez pas si cela semble un peu compliqué, c'est assez simple et je vais vous le démontrer dans
une seconde.
Tout d'abord, le processus principal redémarre en JSON packagé.
Nous savons déjà que lorsque Electron est appelé dans ce répertoire de projet, il vérifie ce
package que le fichier JSON pour le point d'entrée de l'application étant ce fichier doges principal spécifié ici.
Electron lance ensuite le script en tant que processus d'application principal, un processus notoire.
Donc, dans l'esprit, la première chose qui se produit est que le module électronique est requis en utilisant une
affectation structurée pour référencer quelques-uns de ses sous-modules, l'un étant l'instance elle-même et l'autre le module de fenêtre du
navigateur, que nous utilisons pour créer un processus ou une fenêtre de rendu, couvrira chacun d'eux en détail plus
tard sur l'application.
Instant est automatiquement créé.
Donc, tout ce que nous faisons, une fois que le processeur principal a démarré, est d'écouter que l'instance up soit prête, à quel point
nous appelons la fonction de création de fenêtre.
Nous devons toujours attendre que l'application soit prête avant de tenter de créer un processus de rendu.
La fonction de création de fenêtre crée ensuite un nouveau processus de rendu ou une nouvelle instance de fenêtre
de navigateur avec une largeur de 1000 pixels et une hauteur de 800, en l'affectant à cette variable de fenêtre principale, qui est
très importante créée dans la portée globale de MINDGAMES.
N'oubliez pas que Main est exécuté en tant que processus de notification, donc avoir une référence à la fenêtre principale ou
à tout autre processus de rendu ici l'empêchera d'être ramassé.
Juste une petite mais importante technicité sur la façon dont un électron monte.
OK, alors revenons à avoir cette nouvelle fenêtre de navigateur ou moteur de rendu, qui est bien sûr
une fenêtre chrome, nous pouvons ensuite procéder au chargement du contenu dans cette fenêtre du navigateur en appelant load file index dot html,
ce fichier HDMI index dot ici.
Je vais ouvrir ça.
Et nous voyons le contenu de ce que l'application exécute actuellement, ce qui est très important, notez que dans ce
processus de rendu, nous pouvons toujours accéder à toutes les API notoires à partir du processus principal.
Vous avez peut-être remarqué lors de la création du moteur de rendu, cette option ici, l'intégration des nœuds définie sur true, mais nous
aborderons cela plus tard.
Ce dicton simple n'intègre aucun doges dans le processus de rendu avec l'intégration des nœuds.
Nous pouvons également inclure un JavaScript séparé à exécuter dans la fenêtre du navigateur à l'aide de Noge, le rendu de fonction requis
étant un simple fichier JavaScript qui s'exécutera dans la fenêtre du navigateur, pas différent de tout JavaScript dans un
navigateur standard, sauf pour ne pas avoir accès à aucun montant de porte.
C'est donc la structure de base d'un électron dans un processus principal fonctionnant avec un nœud et un ou plusieurs
processus de rendu étant des navigateurs de chrome exécutés par ce processus principal.
Désormais, lors du développement d'applications électroniques, des changements constants seront apportés à ces deux processus.
Alors d'abord, le moteur de rendu.
Je vais changer ça.
En-tête H1 pour avoir un peu de couleur de style rouge, enregistrez cette tête dans l'application.
Et comme avec un navigateur Web standard, rechargez avec la commande ou ou le contrôle.
Y a-t-il des mises à jour du moteur de rendu?
Nous pouvons utiliser des modules tels que le rechargement d'électrons pour automatiser ce rechargement pour nous lors de l'enregistrement des modifications dans un processus
de rendu.
Mais personnellement, je préfère simplement recharger la fenêtre manuellement de cette manière.
Cela nous donne au moins le temps de passer à l'application après avoir enregistré et observé à nouveau les modifications.
Même chose pour tout JavaScript inclus dans ce contenu.
Ouvrez le fichier le plus douteux du Renderer, ajoutez un message de journal.
Je déconnecte l'objet de processus de nœud, je le sauvegarde dans l'application, je le recharge et nous l'avons dans les outils def.
OK, alors qu'en est-il des modifications du processus principal?
Dans cette fonction de création de fenêtre, notre fenêtre de création de déconnexion.
Enregistrez ceci, vérifiez le terminal sur lequel ce processus principal est en cours d'exécution et rien n'actualise l'application comme auparavant.
Toujours rien car cela ne fait que recharger le contenu de la fenêtre du navigateur.
Maintenant, cette partie, je veux généralement automatiser le développement en arrêtant et en redémarrant l'application.
Chaque fois que nous mettons à jour le processus principal est un peu inutile.
Pour ce faire, j'utiliserai le nœud un.
Vous l'avez probablement déjà repéré dans le fichier JSON du package en tant que dépendance de développement, ce qui signifie qu'il est
déjà installé.
Et dans nos scripts NPM, j'ai cette commande watch ici.
Gnomon exécute électron dans le répertoire courant.
Identique au script de démarrage ici.
Tuez le processus principal, qui ferme l'application et exécutez, npm run.
Regardez le nom de ce script dans le package que le fichier Jason entre.
Et l'application se lance comme avant cette fois, évidemment, après avoir enregistré ce message du processus principal
au redémarrage de l'application.
Changé à nouveau le processus principal, cependant, je supprimerai le message du journal et
changerai la fenêtre du navigateur avec 1600 enregistrer et immédiatement le nœud redémarrera le processus principal, ce qui nous amène directement à l'application
avec ces modifications.
Donc, supprimant la nécessité de redémarrer manuellement l'application à chaque fois.
J'espère que vous avez maintenant une bien meilleure compréhension du fonctionnement d'une application d'électrons.Ainsi, dans la prochaine
leçon, nous approfondirons l'utilisation de Notorious dans le cadre de votre application et verrons comment ajouter des modules de nœuds tiers
à partir du registre NPM.